<template>
	<div class="padding-container" v-loading.fullscreen.lock="fullscreenLoading">
		<div class="title-part">
		</div>
		<div class="data-preview">
	    <el-form class="tab-pan form-inline" size="small" label-position="right" :label-width="formLabelWidth">
        <el-form-item :label="getLabel('deviceNum')">
          <a class="download" href="/control/devices/device">{{ deviceData.deviceNum }}</a>
        	<el-button type="primary" onclick="window.open('https://shop586644098.taobao.com/?spm=a230r.7195193.1997079397.2.6c615b77nLJcxC')">{{ $root.lang.control.overview.goBuy }}</el-button>
        </el-form-item>
        <el-form-item :label="getLabel('groupNum')" v-show="show">
          <a class="download" href="/control/devices/group">{{ deviceData.groupNum }}</a>
        </el-form-item>
        <el-form-item :label="getLabel('appNum')">
          <a class="download" href="/control/apps/private">{{ appNum }}</a>
        </el-form-item>
      </el-form>
      <el-form class="tab-pan form-inline" size="small" label-position="right" :label-width="formLabelWidth">
        <el-form-item :label="getLabel('activeNum')">
          <a class="download" @click="toActiveList()">{{ deviceData.activeNum}}</a>
        </el-form-item>
        <el-form-item :label="getLabel('onlineNum')">
          <a class="download" @click="toOnlineList()">{{ deviceData.onlineNum}}</a>
        </el-form-item>
      </el-form>
		</div>
	</div>
</template>

<script>
export default {
	name: 'DashboardPreview',
	data() {
		return {
			formLabelWidth:'100px',
			fullscreenLoading: false,
			appNum: '',
			deviceData: {},
			show: false,
		}
	},
	methods: {
	  getLabel(name) {
	    return this.$root.lang.control.overview[name]+'：'
	  },
	  toBuy() {
	  	window.open('https://shop586644098.taobao.com/?spm=a230r.7195193.1997079397.2.6c615b77nLJcxC')
	  },
	  toActiveList() {
	  	this.$router.push({ name:'DeviceList', query: { isActivation: 3 } })
	  },
	 	toOnlineList() {
	  	this.$router.push({ name:'DeviceList', query: { isConnection: 1 } })
	  },
	  getInfo() {
			if(this.$root.langType == 'en'){
	      this.formLabelWidth = '140px'
	    }
	  },
	  getAppCount() {
	  	this.fullscreenLoading = true
	  	this.request({
        url: '/application/private/overview',
        method: 'get',
        params: {}
      }).then(response => {
         this.appNum = response.result.appNum
				 this.fullscreenLoading = false
      }).catch(error => {
				this.fullscreenLoading = false
      })
	  },
	 	getDeviceCount() {
			this.fullscreenLoading = true
	  	this.request({
        url: '/device/overview',
        method: 'get',
        params: {}
      }).then(response => {
         this.deviceData = response.result
				 this.fullscreenLoading = false
      }).catch(error => {
				this.fullscreenLoading = false
      })
	  },
	  getData() {
			if(this.Cookies.get('T') == '2') {
				this.show = true
			}
	  	let base = this
	  	let p1=new Promise(function(resolve,reject){
				base.getDeviceCount()
			});
			let p2=new Promise(function(resolve,reject){
				base.getAppCount()
			});
			let p5=Promise.all([p1,p2]);
			p5.then(function(v){
			})
	  }
	},
	created() {
		this.getInfo()
		this.getData()
	}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	.padding-container {
		.title-part {
			text-align: left;
			padding-bottom: 20px;
			font-size: 18px;
		}
		.data-preview {
			text-align: left;
		}
		.el-button {
			margin-left:40px;
		}
		.form-inline {
			display: inline-block;
			vertical-align:top;
		}
		.download {
			text-decoration: underline;
			cursor: pointer;
		}
	}
</style>